<template>
  <main>
    <div>
      <!-- 极光背景层 -->
      <div class="absolute inset-0 aurora-background aurora-animation"></div>
      <slot />
    </div>
  </main>
</template>

<style scoped lang="scss">
.aurora-background {
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    // 增强颜色透明度（原0.3-0.4 → 0.5-0.6）
    background-image: repeating-linear-gradient(135deg,
        rgba(138, 43, 226, 0.5) 0%, // 紫色（更明显）
        rgba(0, 255, 255, 0.6) 15%, // 青色（更明显）
        rgba(255, 105, 180, 0.5) 30%, // 粉色（更明显）
        rgba(0, 191, 255, 0.6) 45%, // 天蓝（更明显）
        rgba(138, 43, 226, 0.5) 60% // 紫色（循环）
      );
    background-size: 300% 300%; // 增大背景尺寸（原200% → 300%）
    background-attachment: fixed;
    mix-blend-mode: screen; // 改用更强烈的混合模式（原soft-light → screen）
    opacity: 0.9; // 整体不透明度提升（原0.8 → 0.9）
  }
}

.aurora-animation::after {
  // 加快动画速度（原45s → 30s）
  animation: aurora-flow 30s linear infinite;
}

@keyframes aurora-flow {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}
</style>
